import React from "react"
import { NavBar, Icon, Tabs, ActionSheet, WingBlank, WhiteSpace, Button, Toast } from 'antd-mobile';
import {getDetail1,getUsersongList,getUserInformation} from "./api/index"
import queryString from "query-string"
import  "./personhome.css"
import {List} from "antd-mobile"
import { hidden } from "ansi-colors";

const Item = List.Item
const tabs = [
    { title: '主页' },
    { title: '动态' },
  ];
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
wrapProps = {
    onTouchStart: e => e.preventDefault(),
};
}
class Personhome extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            personInformation:[],
            createDays:'',
            createTime:'',
            level:'',
            listenSongs:'',
            personInformation1:[]
        }
    }
    componentDidMount(props){
        let c = queryString.parse(this.props.location.search)
        console.log(c)
        getDetail1(c.id).then(body=>body.json())
        .then(res=>{
            console.log(res)
            let {profile} = res
            this.setState({
                personInformation:profile,
                createDays:res.createDays,
                createTime:res.createTime,
                level:res.level,
                listenSongs:res.listenSongs
            })
            console.log(this.state)
            
            // getUserInformation().then(body=>body.json())
            // .then(res=>{
            //     console.log(res)
            // })
        })
        getUsersongList(c.id).then(body=>body.json())
            .then(res=>{
                // console.log(res)
                let {playlist} = res
                this.setState({
                    personInformation1:playlist
                })
                console.log(this.state.personInformation1)
            })
        
    }
    Huitui(){
        this.props.history.go(-1)
    
    }
    addMsg(){
        console.log(111)

    }
    jinRu(id){
        this.props.history.push('/my/gedan?id='+id)
    }
    showActionSheet = (nickname) => {
        const BUTTONS = ['设置备注名', '分享', '加入黑名单', '举报'];
        ActionSheet.showActionSheetWithOptions({
          options: BUTTONS,
          destructiveButtonIndex: BUTTONS.length - 2,
          // title: 'title',
          message: nickname,
          maskClosable: true,
          'data-seed': 'logId',
          wrapProps,
        },
        (buttonIndex) => {
          this.setState({ clicked: BUTTONS[buttonIndex] });
        });
      }
    render(){
        // this.state.personInformation1.map((item,index)=>{
        //     if(index=1){
        //         console.log(item.name)
        //     }
        // })
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.Huitui.bind(this)}/>}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <img src={require('./img/三个点.png')} onClick={this.showActionSheet.bind(this,this.state.personInformation.nickname)}/>,
                        <img src={require('./img/音乐.png')}/>,
                    ]}
                   ></NavBar>
                <div> 
                    {/* style={{background:this.state.personInformation.backgroundUrl}} */}
                    <img src={this.state.personInformation.avatarUrl} alt="" className='img2'/>
                    <p>{this.state.personInformation.nickname}</p>
                    <p>关注{this.state.personInformation.follows}|粉丝{this.state.personInformation.followeds}</p>
                    <div>{this.state.personInformation.gender===1?<img src={require('./img/男.png')} style={{width:'30px',height:'30px'}}></img>:<img src={require('./img/女.png')} style={{width:'30px',height:'30px'}}></img>}</div>
                    <div>lv.{this.state.level}</div>
                    <div>编辑</div>
                    <div>更换背景</div>
                </div>
                <Tabs tabs={tabs} initialPage={2} animated={false} useOnPan={false} >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#fff' ,overflow:hidden,}} className="Tabs33">
                    
                    
                    <List>
                        <Item
                        thumb={require('./img/音乐.png')}

                        >
                            <p>听歌排行</p>
                            <p>累计听歌{this.state.listenSongs}首</p>
                        </Item>
                        {this.state.personInformation1.map((item,index)=>(
                            <Item
                            thumb={item.coverImgUrl}
                            onClick={this.jinRu.bind(this,item.id)}
                            key={index}
                            >
                                <p>{item.name}</p>
                                <p>{item.trackCount}首,播放{item.playCount}次</p>
                            </Item>
                        ))}
                    </List>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                    <p>暂无相关动态</p>
                </div>
                </Tabs>
            </div>
        )
    }
}

export default Personhome